<template>
  <!--<el-container v-bind:style="{height: screenHeight}">-->
    <el-container :style="{height:screenHeight}" >
      <!--@mouseenter.native="collapseOpen" @mouseleave.native="collapseClose"-->
      <el-aside  width="auto" class="hidescroll"   >
      <mynavmenu :mycollapse="isCollapse" />
      </el-aside>

      <el-container>
        <el-header class="headercss">
          <myheader  @changeCol="collapseStatus" />
        </el-header>
        <el-main  >
          <div class="maincss">
          <router-view/>
          </div>
        </el-main>
      </el-container>
  </el-container>
</template>

<script>
  import NavMenu from '@/components/common/NavMenu'
  import Header from '@/components/common/Header'
  export default {
    name: 'app',
    data(){
      return{
        //screenHeight: document.body.clientHeight
        screenHeight:"700px",
        isCollapse: true,

      }
    },
    components: {
      'mynavmenu': NavMenu,
      'myheader': Header
    },
    mounted:function(){
      this.screenHeight = window.innerHeight+"px";
      //console.log(x+"px");
    },
    methods:{
      collapseStatus() {
        this.isCollapse = !this.isCollapse;
      },
      collapseOpen() {
        this.isCollapse = false;
      },
      collapseClose() {
        this.isCollapse = true;
      }
    }

  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .headercss{
    background:#f9f9f9;
  }
  .maincss{
    background: #fff;
    box-shadow: 0px 0px 1px  #999999;
    padding: 20px;
  }
  .hidescroll{
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .hidescroll::-webkit-scrollbar {
    display: none;
  }
</style>
